<template>
  <div>
    <el-button type="primary" @click="toAdd">发 贴</el-button>
    <hr />
    <page-table
      :data="commentList"
      :total="count"
      :page="pageIndex"
      :pageSize="pageSize"
      ref="pageTable"
      showIndex
      @currentChange="currentChange"
      @sizeChange="sizeChange"
      :loading="loading"
    >
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="标题"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="content"
        label="内容"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="发布时间">
        <template slot-scope="{ row }">
          {{ row.createdAt | timeFilter }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="userNickName"
        label="发布人"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="相关图片">
        <template slot-scope="{ row }">
          <el-image
            v-for="item in row.imgs"
            :key="item"
            :src="item"
            style="height: 40px;width: 40px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-if="$store.getters.uid == row.uid"
            @click="toRemove(row.id)"
            >删除</el-button
          >
          <el-button
            type="text"
            v-if="$store.getters.uid == row.uid"
            @click="toEdit(row.id)"
            >修改</el-button
          >
          <el-button type="text" @click="toDetail(row.id)">详情</el-button>
        </template>
      </el-table-column>
    </page-table>
    <post-dialog @cancel="cancel" :dialogVisible="dialogVisible" :opId="opId" />
    <detail-dialog
      @cancel="cancel1"
      :dialogVisible="dialogVisible1"
      :opId="opId"
    />
  </div>
</template>

<script>
import initData from "../../../mixins/initData";
import PostDialog from "../components/postDialog";
import DetailDialog from "../components/detailDialog";
export default {
  components: { DetailDialog, PostDialog },
  name: "commentManage",
  mixins: [initData],
  data() {
    return {
      getUrl: "/api/comment/comment",
      searchForm: {}
    };
  },
  computed: {
    commentList() {
      return this.tableData.map(item => {
        const tempImgs = item.imgs ? item.imgs.split(",") : [];
        if ((tempImgs, length > 3)) {
          tempImgs.splice(3);
        }
        return { ...item, imgs: tempImgs };
      });
    }
  }
};
</script>

<style scoped></style>
